<script setup>
import { ref, reactive, inject } from 'vue';
import SmtHeader from '@/layout/SmtHeader.vue';
import SmtFooter from '@/layout/SmtFooter.vue';
import UpLoad from '@/components/upLoad/UpLoad.vue';
import NumberPatches from '@/components/upLoad/NumberPatches.vue';
import AnalyseFile from '../../../components/upLoad/AnalyseFile.vue';
import { uploadDocFile } from '@/server/api/file';
import { ElMessage } from 'element-plus';
import { standardDocumentsPath } from '@/server/api/file';
import { downloadFile } from '@/utils/common.js';

import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const images = inject('images');
const visible = ref(false);
const flieData = ref(null);
const fileUploadRequest = ref(null);
const patchNum = ref(0);
const isHideBomShowSuccess = ref(false);

const quotationProcess = [
  {
    step: 'bom.Step1',
    desc: 'bom.UploadBOMfile',
    icon: images['icon_flow_1@2x'],
  },

  {
    step: 'bom.Step2',
    desc: 'bom.BOMIntelligent',
    icon: images['icon_flow_2@2x'],
  },
  {
    step: 'bom.Step3',
    desc: 'bom.STMordering',
    icon: images['icon_flow_3@2x'],
  },
  {
    step: 'bom.Step4',
    desc: 'bom.Payment',
    icon: images['icon_flow_4@2x'],
  },
];
const list = [
  {
    id: 1,
    name: 'bom.Privatestock',
    Text: 'bom.Prepareinadvance',
    icon: images['icon_intro_1@2x'],
    class: '',
  },
  {
    id: 2,
    name: 'bom.Ownmaterial',
    Text: 'bom.Privatematerial',
    icon: images['icon_intro_2@2x'],
    class: 'warning',
  },
  {
    id: 3,
    name: 'bom.IBEFeeding',
    Text: 'bom.Completerange',
    icon: images['icon_intro_3@2x'],
    class: 'success',
  },
];

/**
 * 下载BOM文件模板
 */
const downloadBom = () => {
  standardDocumentsPath().then((res) => {
    if (res.code == 200) {
      downloadFile(res.data.bomLinkPath);
    }
  });
};

/**
 * 获取弹框布尔值
 * @param {*} isbo
 */
const getModea = (isbo) => {
  visible.value = isbo;
};

/**
 * 获取上传文件的flie值
 * @param {*} flie
 */
const getFlieData = (flie) => {
  flieData.value = flie;
};

// const getFileUploadRequestValue = (data) => {
//   fileUploadRequest.value = data;
// };
/**
 * 获取文件更新数据
 * @param {*} data
 */
const onConfirm = (num) => {
  const obj = {
    fileType: 2,
    batchYearLimit: 0, // 接受批次(默认0 不限)
    isUseAlternative: 1, // 是否接受替(1接受，2不接受 默认1）
    smtLayer: 1, // 贴片层(1全贴，2顶层，3底层,默认1全贴)
    quantity: num,
    file: flieData.value,
  };
  uploadDocFile(obj).then((res) => {
    if (res.code === 200) {
      ElMessage.success(t('mall.upload_successful'));
      fileUploadRequest.value = res.data;
      // 保存数量
      patchNum.value = num;
      visible.value = false;
    } else {
      reUpload();
      ElMessage.error(res.msg);
    }
  });
  visible.value = false;
  isHideBomShowSuccess.value = true;
};

/**
 * 重新上传
 */
const reUpload = () => {
  fileUploadRequest.value = null;
  flieData.value = null;
  isHideBomShowSuccess.value = false;
};
</script>
<template>
  <!-- 头部 -->
  <smt-header></smt-header>
  <div class="wrapper">
    <div class="pricing-bom container">
      <div class="breadcrumb-wrap">
        <div style="margin-bottom: 20px">
          <el-breadcrumb :separator-icon="ArrowRight" class="f-28">
            <el-breadcrumb-item>{{ $t('menu.home') }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('bom.BOMQuote') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 轮播图 -->
        <div class="carousel-wrap">
          <el-carousel height="258px">
            <el-carousel-item v-for="item in 4" :key="item">
              <div class="carousel-item">
                <router-link to="/pricing/pcb">
                  <img :height="258" src="../../../assets/images/home/home_banner.jpg" />
                </router-link>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <div class="bom-upload-wrap">
        <UpLoad
          @getModea="getModea"
          @getFlieData="getFlieData"
          :name="$t('bom.UploadBOMfiles')"
          fileType="2"
          :warningTitle="$t('mall.smt_quantity')"
          v-if="!isHideBomShowSuccess"
        >
          <div>
            <p class="upload-tip desc">{{ $t('bom.Wewillcalculateyour') }}</p>
            <p class="upload-tip">{{ $t('bom.SupportExcel') }}</p>
            <!-- @click="downloadBom" -->
            <div class="downloadBom" @click="downloadBom">
              {{ $t('bom.DownloadBOMfiletemplate') }}
            </div>
          </div>
        </UpLoad>
        <AnalyseFile
          v-else
          :fileUploadRequest="fileUploadRequest"
          :patchNum="patchNum"
          @reUpload="reUpload"
        />
      </div>

      <div class="intro-wrap">
        <div class="intro-container">
          <div :class="['intro-box', item.class]" v-for="item in list" :key="item.id">
            <div class="title-wrap">
              <p class="intro-box-title">{{ $t(item.name) }}</p>
              <p class="intro-box-desc">{{ $t(item.Text) }}</p>
            </div>
            <img :src="item.icon" alt="" class="intro-box-img" />
          </div>
        </div>
        <div class="flow-wrap">
          <h2 class="flow-title">{{ $t('bom.BOMQuotationProcess') }}</h2>
          <div class="flow-container">
            <div v-for="(item, index) in quotationProcess" :key="item.step" style="display: flex">
              <div class="flow-item">
                <img :src="item.icon" />
                <p class="step">{{ $t(item.step) }}</p>
                <p class="desc">{{ $t(item.desc) }}</p>
              </div>
              <img
                v-if="index !== quotationProcess.length - 1"
                src="/src/assets/images/icons/icon-step-arrow_2@2x.png"
                style="padding-top: 50px"
                width="155"
                height="10"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <NumberPatches v-model="visible" @getModea="getModea" :flieData="flieData" @confirm="onConfirm" />
  <!-- 底部 -->
  <smt-footer></smt-footer>
</template>
<style lang="scss" scoped>
.upload-tip {
  text-align: center;
  color: #a6a6a6;
  font-size: 14px;
  &.desc {
    padding-top: 16px;
    color: var(--mall-text-color-primary);
  }
}
.downloadBom {
  text-align: center;
  color: #5255fe;
  font-size: 14px;
  cursor: pointer;
  margin-top: 20px;
}
.el-carousel--horizontal {
  border-radius: 8px;
}
.bom-upload {
  width: 100%;
  height: 350px;
  background-color: var(--mall-body-bg-color);
  border-radius: 8px;
  display: grid;
  justify-content: center;
  margin-top: 12px;
}
.wrapper {
  padding: 20px 0 72px;
  background: #f5f5f5;
  .pricing-bom {
    // padding: 24px 32px 72px;
    border-radius: 8px;
    // background: #fff;
    border-bottom: 1px solid #f5f5f5;
    &.container {
      width: 1440px;
      margin: 0 auto;
    }

    .page-title {
      padding: 0 24px 12px;
      color: var(--mall-text-color-primary);
      font-size: 20px;
      font-weight: 700;
    }

    .carousel-item {
      height: 272px;
      background: gray;
      img {
        object-fit: cover;
        width: 100%;
      }
    }

    .intro-wrap {
      margin-top: 25px;
      border-radius: 10px;
      background: #fff;
    }

    .intro-container {
      display: flex;
      justify-content: space-between;
      padding: 30px 20px 0;
      .intro-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px;
        width: 410px;
        height: 172px;
        border-radius: 8px;
        background: #5255fe0f;
        &.warning {
          background: #ff8d1a0f;
        }
        &.success {
          background: #52c2680f;
        }
        &-title {
          color: #5255fe;
          font-size: 18px;
          font-weight: 500;
          &.warning {
            color: #ff8d1a;
          }
          &.success {
            color: #52c268;
          }
        }
        &-desc {
          padding-top: 12px;
          color: var(--mall-text-color-primary);
          font-size: 14px;
        }
        img {
          width: 120px;
          height: 120px;
        }
      }
    }
    .flow-title {
      padding-top: 30px;
      padding-bottom: 20px;
      text-align: center;
      color: var(--mall-text-color-primary);
      font-size: 20px;
      font-weight: 700;
    }
    .flow-container {
      padding: 0 180px 30px;
      display: flex;
      justify-content: space-between;

      .flow-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 120px;
          height: 105px;
        }
        .step {
          padding-top: 16px;
          color: var(--mall-text-color-primary);
          font-size: 16px;
          font-weight: 700;
        }
        .desc {
          padding-top: 8px;
          color: var(--mall-text-color-primary);
          font-size: 14px;
        }
      }
    }
  }

  .breadcrumb-wrap {
    border-radius: 10px;
    background: #fff;
    padding: 20px;
  }
}

.bom-upload-wrap {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #d9d9d9;
  .upload-box {
    border: none;
    background: #fff;
    height: 200px;
    border-radius: 10px;
  }
}
</style>
